﻿
@{
    ViewBag.Title = "ScreenShotView";
}

@{
    ViewBag.Title = "首页-背景图片截图文字水印测试";
}


<div class="content">

    <button class="btn btn-danger img-gallery-btn" data-toggle="modal" data-target="#modal-gallery" title="选择水印图作为背景图">选择水印图作为背景图</button>


</div>

<div class="modal fade" id="modal-gallery" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">选择图片</h4>
            </div>
            <div class="modal-body">
                <ul class="ace-thumbnails clearfix" id="img-list">
                </ul>
                <div class="center" style=" background-color: #F5F5F5;border-top: 1px solid #E5E5E5;padding: 10px;margin:5px;"><button class="btn btn-primary" id="btn-loadmore">加载更多</button></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="gallery-submit">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<script>
    var queryParams = { imageSourceType: 0, marker: '' };

    $(function () {
        $('.img-gallery-btn').click(function () {

            queryParams.marker = '';

            $('#img-list').empty();

            queryParams.imageSourceType = 0;



            var text = $(this).attr('title');
            $('#modal-gallery .modal-title').text(text);
            fetchCosImage();
        })


        $('#btn-loadmore').click(function () {
            fetchCosImage();
        })
        $('#img-list').on('click', ' li', function () {
            var el = $(this);
            var className = el.attr('class');
            var seleted = false;
            seleted = className == 'selected';
            $('#img-list li').each(function () { $(this).removeClass('selected') })


            if (!seleted) el.addClass('selected');

        })
        $('#gallery-submit').click(function () {
            var selected = false;
            var src = '';
            var objectKey = ''
            var width = 0;
            var height = 0;

            $('#img-list li').each(function () {
                var className = $(this).attr('class');
                if (className == 'selected') {
                    selected = true;
                    var imgel = $(this).children('img');
                    src = imgel.attr('src');
                    objectKey = imgel.attr('data-key');
                    width = this.naturalWidth;
                    height = this.naturalHeight;
                    return true;
                }
            })
            if (!selected) {
                $.niceAlert.warnning('请选择一张图片！');
                return;
            }
            $('.main-container').css('background-image', `url(${src})`);
            $('.main-container').css('background-size', `cover`);
            $('#modal-gallery').modal('hide');

        })
    })


    function fetchCosImage() {

        var url = '/api/WaterMark/GetImagesFromBucket';
        var param = {};

        //param = 'marker = ' + queryParams.marker;
        param = {
            marker: queryParams.marker,
            type: queryParams.imageSourceType,
            watermarktype: 3
        };

        $.get(url, param, function (res, status) {
            $('#img-list').innerHtml = '';
            var innerHtml = '';
            if (res.success) {
                var data = res.data;

                data.list.forEach(n => {

                    innerHtml = innerHtml + `<li><img src=${n.PreviewUrl} data-key='${n.ObjectKey}' onload='getImgInfo(this)'><div class='img-wrapper'><i class="ace-icon fa fa-check"></i></div><span class='img-info'></span></li>`
                })
                if (data.marker) {
                    $('#btn-loadmore').show();

                }
                else {
                    $('#btn-loadmore').hide();
                }
                queryParams.marker = data.marker;
                $('#img-list').append(innerHtml);
            }

        })

    }

    function getImgInfo(img) {
        var width = img.naturalWidth;
        var height = img.naturalHeight;
        //$(img).siblings('.img-wrapper').children('.img-info').text(width + 'x' + height)

        $(img).parent('li').children('.img-info').text(width + 'x' + height);
    }
</script>
